<template>
	<view class="collect">
		<view class="tabnavBox">
			<view class="tabnav" @tap="getData">
				<view>
					商品
				</view>
				<text :class="{active:current == 0}"></text>
			</view>
			<view class="tabnav" @tap="getshopList">
				<view>
					店铺
				</view>
				<text :class="{active:current == 1}"></text>
			</view>
		</view>
		<view class="uni-list  specials" v-if="current == 0">
			<view v-if="dataList.length>0" class="uni-list-cell" v-for="(item,index) in dataList" :key="index" @tap="goDetails(item)" :class="{disabled:item.productStatus == 1}">
				<view class="scrollBar" @touchstart="touchStart($event,index)" @touchend="touchEnd($event,index)" @touchmove="touchMove($event,index)"
				 :style="{transform:'translate3d('+ item.slide_x +'px, 0, 0)'}">
					<view style="width: 100%;">
						<view class="selectList">
							<view class="imgbox">
								<image :src="item.icon" mode="scaleToFill"></image>
							</view>
							<view class="">
								<view class="desction">
									{{item.productName}}
								</view>
								<view>
									<view class="priceBox">
										￥ <text class="price">{{item.productPrice}} </text>
									</view>
									<view class="storeName">
										<text>{{item.storeName | splicName}}</text>
										<text style="color: #4d4d4d;font-size: 24upx;">总销量：{{item.productSale}}</text>
									</view>
									<view class="xiajiaImg" v-if="item.productStatus == 1">
										<image src="../../static/images/xiajia.png" mode="scaleToFill" lazy-load="true"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="group-btn">
						<view class="removeM btn-div" @tap.stop="removeCommodity(index,item)">
							删除
						</view>
					</view>
				</view>
			</view>
			<view class="empty" v-if="dataList.length == 0">
				<image src="../../static/images/shoucang.png" mode="scaleToFill"></image>
			</view>
		</view>
		<view v-if="current == 1" class="uni-list shopList">
			<view v-if="shopList.length > 0" class="uni-list-cell " v-for="(item,index) in shopList" :key="index" @tap="goshop(item)" :class="{disabled:item.storeStatus == 1}">
				<view class="scrollBar" @touchstart="touchStart1($event,index)" @touchend="touchEnd1($event,index)" @touchmove="touchMove1($event,index)"
				 :style="{transform:'translate3d('+ item.slide_x +'px, 0, 0)'}">
				 <view style="width: 100%;">
				 	<view class="shopBox">
				 		<view class="shopname">
				 			<image :src="item.icon" mode="scaleToFill"></image>{{item.storeName}}
				 		</view>
				 		<view class="rightIcon">
				 			<image v-if="item.storeStatus == 1" class="shopxiajiaImg" src="../../static/images/xiajia_1.png" mode=""></image>
				 			<image class="goright" src="../../static/images/arrows-right.png" mode="scaleToFill"></image>
				 		</view>
				 	</view>
				 </view>
					<view class="group-btn">
						<view class="removeM btn-div" style="height: 100%;" @tap.stop="removeShop(index, item)">
							删除
						</view>
					</view>
					
				</view>
			</view>
			<view class="empty" v-if="shopList.length == 0">
				<image src="../../static/images/shoucang.png" mode="scaleToFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				current: 0,
				shopList: [],
				start_slide_x: 0,
				btnWidth: 0,
				startX: 0,
				lastX: 0,
				startTime: 0,
			}
		},
		onLoad() {
			// this.getshopList()
		},
		onShow() {
			if(this.current == 0){
				this.getData()
			}
			if(this.current == 1){
				this.getshopList()
			}
		},
		methods: {
			//获取商品列表
			getData() {
				this.current = 0
				let data = {
					"pageNum": 0,
					"pageSize": 0,
				}
				this.$http.post(this.$http.baseUrl + '/api/v1.0/collect/Product/List', data, res => {
					this.dataList = res.data.data.list
					for (let i = 0; i < this.dataList.length; i++) {
						this.dataList[i].slide_x = 0
					}
				})
			},
			//获取店铺列表
			getshopList() {
				this.current = 1
				let data = {
					"pageNum": 0,
					"pageSize": 0,
				}
				this.$http.post(this.$http.baseUrl + '/api/v1.0/collect/Store/List', data, res => {
					this.shopList = res.data.data.list
					for (let i = 0; i < this.shopList.length; i++) {
						this.shopList[i].slide_x = 0
					}
				})
			},
			//跳转商品详情
			goDetails(item) {
				if (item.productStatus == 1) {
					uni.showToast({
						title: '该商品已下架',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: "../details/details?id=" + item.productId
				})
			},
			//跳转店铺详情
			goshop(item) {
				if (item.productStatus == 1) {
					uni.showToast({
						title: '该店铺已下架',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: "../shop/shop?shopId=" + item.storeId
				})
			},
			touchStart(e,i) {
				//记录手指放上去的时间
				this.startTime = e.timeStamp;
				//记录滑块的初始位置
				this.start_slide_x = this.dataList[i].slide_x;
				// 按钮宽度
				uni.createSelectorQuery()
					.selectAll('.group-btn')
					.boundingClientRect()
					.exec(res => {
						if (res[0] != null) {
							this.btnWidth = res[0][i].width * -1;
						}
					});
				// 记录上一次开始时手指所处位置
				this.startX = e.changedTouches[0].pageX;
				// 记录上一次手指位置
				this.lastX = this.startX;
				//初始化非当前滑动消息列的位置
				this.dataList.forEach((item, eq) => {
					if (eq !== i) {
						item.slide_x = 0;
					}
				});
				
			},
			// 滑动中
			touchMove(e,i) {
				const endX = e.changedTouches[0].pageX;
				const distance = endX - this.lastX;
				// 预测滑块所处位置
				const duang = this.dataList[i].slide_x + distance;
				// 如果在可行区域内
				if (duang <= 0 && duang >= this.btnWidth) {
					this.dataList[i].slide_x = duang;
				}
				this.lastX = endX;
			},
			// 滑动结束
			touchEnd(e,i) {
				let distance = 10;
				const endTime = e.timeStamp;
				const x_end_distance = this.startX - this.lastX;
				if (Math.abs(endTime - this.startTime) > 200) {
					distance = this.btnWidth / -2;
				}
				// 判断手指最终位置与手指开始位置的位置差距
				if (x_end_distance > distance) {
					this.dataList[i].slide_x = this.btnWidth;
				} else if (x_end_distance < distance * -1) {
					this.dataList[i].slide_x = 0;
				} else {
					this.dataList[i].slide_x = this.start_slide_x;
				}
			},
			touchStart1(e,i) {
				//记录手指放上去的时间
				this.startTime = e.timeStamp;
				//记录滑块的初始位置
				this.start_slide_x = this.shopList[i].slide_x;
				// 按钮宽度
				uni.createSelectorQuery()
					.selectAll('.group-btn')
					.boundingClientRect()
					.exec(res => {
						if (res[0] != null) {
							this.btnWidth = res[0][i].width * -1;
						}
					});
				// 记录上一次开始时手指所处位置
				this.startX = e.changedTouches[0].pageX;
				// 记录上一次手指位置
				this.lastX = this.startX;
				//初始化非当前滑动消息列的位置
				this.shopList.forEach((item, eq) => {
					if (eq !== i) {
						item.slide_x = 0;
					}
				});
				
			},
			// 滑动中
			touchMove1(e,i) {
				const endX = e.changedTouches[0].pageX;
				const distance = endX - this.lastX;
				// 预测滑块所处位置
				const duang = this.shopList[i].slide_x + distance;
				// 如果在可行区域内
				if (duang <= 0 && duang >= this.btnWidth) {
					this.shopList[i].slide_x = duang;
				}
				this.lastX = endX;
			},
			// 滑动结束
			touchEnd1(e,i) {
				let distance = 10;
				const endTime = e.timeStamp;
				const x_end_distance = this.startX - this.lastX;
				if (Math.abs(endTime - this.startTime) > 200) {
					distance = this.btnWidth / -2;
				}
				// 判断手指最终位置与手指开始位置的位置差距
				if (x_end_distance > distance) {
					this.shopList[i].slide_x = this.btnWidth;
				} else if (x_end_distance < distance * -1) {
					this.shopList[i].slide_x = 0;
				} else {
					this.shopList[i].slide_x = this.start_slide_x;
				}
			},
			//删除商品
			removeCommodity(index,item){
				let self = this
				uni.showModal({
					title: '',
					content: '确定要删除该收藏吗？',
					confirmText: '删除',
					confirmColor: '#ff3b32',
					success: function (res) {
						if (res.confirm) {
							let data = {
								"productId": item.productId,
							}
							self.$http.post('/api/v1.0/collect/DeleteProduct',data,res=>{
								if(res.data.status == '000000'){
									uni.showToast({
										icon: "none",
										title: '删除成功!'
									});
									self.dataList.splice(index, 1)
									if(self.dataList.length<5){
										self.getData()
									}
								}else{
									uni.showToast({
										icon: "none",
										title: '删除失败，请稍后再试!'
									});
								}
								
							})
							
						} else if (res.cancel) {
						}
					}
				});
			},
			//删除店铺
			removeShop(index,item){
				let self = this
				uni.showModal({
					title: '',
					content: '确定要删除该商店吗？',
					confirmText: '删除',
					confirmColor: '#ff3b32',
					success: function (res) {
						if (res.confirm) {
							let data = {
								"storeId": item.storeId,
							}
							self.$http.post('/api/v1.0/collect/DeleteStore',data,res=>{
								if(res.data.status == '000000'){
									uni.showToast({
										icon: "none",
										title: '删除成功!'
									});
									self.shopList.splice(index, 1)
									if(self.shopList.length<5){
										self.getshopList()
									}
								}else{
									uni.showToast({
										icon: "none",
										title: '删除失败，请稍后再试!'
									});
								}
							})
						} else if (res.cancel) {
						}
					}
				});
			},
		},
		filters:{
			splicName(val){
				if(val.length < 7){
					return val
				}else{
					return val.substring(0, 7) + '...'
				}
			}
		}
	}
</script>

<style lang="scss">
	.collect {
		width: 100%;
		min-height: 100vh;
		background-color: #f2f2f2;
		position: relative;
		.empty{
			width: 100%;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			margin-bottom: 20upx;
			top: 0;
			image{
				width: 356upx;
				height: 335upx;
			}
		}
		.scrollBar{
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			// overflow: hidden;
		}
		.removeM {
			background-color: #ff3b32;
			height: calc(100% - 20upx);
			color: #fff;
			padding: 0 20upx;
			font-size: 34upx;
			width: 100upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.tabnavBox {
			width: 200upx;
			margin: 0 auto 30upx;
			padding-top: 40upx;
			display: flex;
			justify-content: space-around;
			font-size: 28upx;
			color: #333;
			position: relative;
			z-index: 999;
			.tabnav {
				text-align: center;
				line-height: 20upx;
				text {
					display: inline-block;
					width: 35upx;
					height: 5upx;
					border-radius: 2.5upx;
					&.active {
						background: linear-gradient(0deg, rgba(232, 39, 27, 1), rgba(252, 63, 12, 1));
					}
				}
			}
		}

		.specials {
			width: 694upx;
			margin: 0 auto;
			overflow: hidden;
			.selectList {
				display: flex;
				justify-content: space-between;
				background-color: #fff;
				box-sizing: border-box;
				margin-bottom: 20upx;
				padding: 20upx;
				border-radius: 20upx;
				position: relative;
				width: 694upx;
				.imgbox {
					margin-right: 25upx;
					image {
						width: 241upx;
						height: 241upx;
					}
				}

				.desction {
					width: 367upx;
					font-size: 30upx;
					color: #333;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal !important;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.priceBox {
					font-size: 24upx;
					color: #F63810;
					margin-top: 49upx;
					font-weight: bold;

					.price {
						font-size: 32upx;
					}
				}

				.storeName {
					color: #808080;
					font-size: 22upx;
					margin-top: 30upx;
					display: flex;
					justify-content: space-between;

				}

				.xiajiaImg {
					width: 123upx;
					height: 123upx;
					opacity: 0.8;
					position: absolute;
					bottom: 30upx;
					right: 35upx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.shopList{
			width: 100%;
			overflow: hidden;
		}
		.shopBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding: 30upx 40upx 30upx 30upx;
			border-bottom: 1upx solid #f2f2f2;
			width: 100vw !important;
			.shopname {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: #333;
				box-sizing: border-box;
				image {
					width: 80upx;
					height: 80upx;
					margin-right: 20upx;
					border-radius: 50%;
				}
			}

			.rightIcon {
				display: flex;
				align-items: center;

				.goright {
					width: 22upx;
					height: 22upx;
				}

				.shopxiajiaImg {
					width: 115upx;
					height: 86upx;
					margin-right: 55upx;
				}
			}
		}

		.disabled {
			opacity: 0.7;
		}
	}
</style>
